<template>
	<view class="user" style="overflow: hidden;height: 100vh">
		<!-- 顶部自定义导航栏 -->
		<view class="tapbar">
			<view class="tapbar-left" @click='loginToFlag'>
				<text class="iconfont icon-xiangzuojiantou" @click="loginToFlag"></text>
			</view>
			<view class="tapbar-center">
				<text>商家主页</text>
			</view>
			<view class="tapbar-right">

			</view>
		</view>

		<view class="user">
			<view class="user-tou">
				<img src="../../../static/M.png" alt="" style="width: 200rpx;height: 200rpx;border-radius: 50%;" />
				<view class="user-t1">
					<view class="text1">
						<text>蔚蓝青岛</text>
						<text class="iconfont icon-duigou"
							style="color: #7a8fff;background-color: #fff;border-radius: 100rpx;margin: 0rpx 10rpx;"></text>
					</view>
					<view class="text2">
						<text style="font-size: 32rpx;">汽车品牌 | ID：NOI_qingdao</text>
					</view>
					<view class="text3">
						<text style="font-size: 24rpx;">IP属地：山东</text>
					</view>
				</view>
			</view>

			<view class="texts">
				<p>红瓦绿树、碧海蓝天</p>
				<p>和蔚蓝一起满电出发!</p>
			</view>

			<view class="san">
				<view class="san1">
					<p style="font-size: 36rpx;">3</p>
					<p style="font-size: 28rpx;font-weight: 100;color: #b0bec5;">关注</p>
				</view>
				<view class="san2">
					<p style="font-size: 36rpx;">1.5万</p>
					<p style="font-size: 28rpx;font-weight: 100; color: #b0bec5;">粉丝</p>
				</view>
				<view class="san3">
					<p style="font-size: 36rpx;">2626</p>
					<p style="font-size: 28rpx;font-weight: 100; color: #b0bec5;">获赞和评论</p>
				</view>
				<view class="san4">
					关注
				</view>
				<view class="san5">
					<text class="iconfont icon-xiaoxizhongxin"></text>
				</view>
			</view>
			<view class="si">
				<view class="si1" @click="to_zheng">
					<img src="../../../static/M.png" alt="" style="width: 100rpx;height: 100rpx;border-radius: 50%;" />
					<text>正宏城店</text>
				</view>
				<view class="si2">
					<img src="../../../static/M.png" alt="" style="width: 100rpx;height: 100rpx;border-radius: 50%;" />
					<text>中鼎大厦店</text>
				</view>
				<view class="si3">
					<img src="../../../static/M.png" alt="" style="width: 100rpx;height: 100rpx;border-radius: 50%;" />
					<text>圣熙店</text>
				</view>
				<view class="si4">
					<img src="../../../static/M.png" alt="" style="width: 100rpx;height: 100rpx;border-radius: 50%;" />
					<text>禹州店</text>
				</view>
				<view class="si5">
					<img src="../../../static/M.png" alt="" style="width: 100rpx;height: 100rpx;border-radius: 50%;" />
					<text>城南店</text>
				</view>
			</view>
			<view class='pubu'>
				<p class='view-p'>
					<view class="view-p1">笔记</view>
					<view class="view-p2">收藏</view>
					<view class="view-p3">点赞</view>
				</p>
				<!-- 动态瀑布流 -->
				<view class="container">
					<view class="cont-box"
						:style="{ '--layout-width': 100 / flowData.column - flowData.columnSpace + '%' }"
						v-for="(numVal, index) in flowData.column" :key="numVal">
						<view class="item-box" v-for="(item, j) in flowData[`column_${index + 1}`]" :key="j">
							<image class="img-tip" :src="item.imgUrl" mode="widthFix" lazy-load />
							<view class="tit-tip multi-line-omit">{{ item.title }}</view>
							<view class="desc-tip multi-line-omit">{{ item.desc }}</view>
						</view>
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { ref, nextTick, onMounted, reactive } from "vue"
	const loginToFlag = () => { }
	const flowData = reactive({
		list: [],
		// 数据值
		column: 2,
		// 瀑布列数
		columnSpace: 2,
		// 瀑布列宽间距
	})
	const to_zheng = () => {
		uni.navigateTo({
			url: '/pages/home/tong_cheng/tong_cheng'
		});
	}
	onMounted(() => {
		/* 初始化每一列的数据 */
		for (let i = 1; i <= flowData.column; i++) {
			flowData[`column_${i}`] = []
		}
		/* 数据赋值 */
		flowData.list = [
			{
				imgUrl: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679045108_thumb.jpg',
				title: '自动驾驶汽车对交通和城市规划的未来影响与挑战',
				desc: '分析自动驾驶汽车对未来交通和城市规划的潜在影响',
			},
			{
				imgUrl: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679044581_thumb.jpg',
				title: '可持续城市发展：构建环保城市的策略和实践',
				desc: '分析建设可持续城市的战略和实际方法，强调环保、资源利用和城市规划的重要性。',
			},
			{
				imgUrl: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679044779_thumb.jpg',
				title: '气候变化缓解的复杂性：全球视角下的挑战与机遇',
				desc: '探讨应对气候变化的复杂性，强调全球合作，突出应对挑战所蕴含的机遇。',
			},
			{
				imgUrl: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679044956_thumb.jpg',
				title: '虚拟现实与医疗保健的交汇：革命性地改变患者护理',
				desc: '介绍虚拟现实技术如何在医疗领域革命性地改善患者护理和治疗方法。',
			},
			{
				imgUrl: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679044607_thumb.jpg',
				title: '生物工程的突破：改变医学和人类增强的科技',
				desc: '研究生物工程领域的创新，关注其在医学和人类增强领域的重要作用。',
			},
			{
				imgUrl: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679045083_thumb.jpg',
				title: '社交媒体的演进及其对沟通和社会的影响',
				desc: '追溯社交媒体的发展历程，探讨其对人际沟通和社会动态的广泛影响。',
			},
			{
				imgUrl: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679044643_thumb.jpg',
				title: '元宇宙时代：在工作、教育和娱乐的虚拟世界中导航',
				desc: '介绍元宇宙时代，强调虚拟世界在工作、教育和娱乐中的多样应用。',
			},
			{
				imgUrl: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679044936_thumb.jpg',
				title: '通用人工智能：人类是否准备好面对超智能机器？',
				desc: '研究通用人工智能的发展，引发思考人类面对超级智能机器的准备程度。',
			},
			{
				imgUrl: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679045159_thumb.jpg',
				title: '超越火星：人类太空探索和星际旅行的未来',
				desc: '展望人类在太空探索领域的未来，探讨星际旅行的潜力和挑战。',
			},
			{
				imgUrl: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679045159_thumb.jpg',
				title: '超越火星：人类太空探索和星际旅行的未来',
				desc: '展望人类在太空探索领域的未来，探讨星际旅行的潜力和挑战。',
			},
			{
				imgUrl: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679045159_thumb.jpg',
				title: '超越火星：人类太空探索和星际旅行的未来',
				desc: '展望人类在太空探索领域的未来，探讨星际旅行的潜力和挑战。',
			},
			{
				imgUrl: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679045159_thumb.jpg',
				title: '超越火星：人类太空探索和星际旅行的未来',
				desc: '展望人类在太空探索领域的未来，探讨星际旅行的潜力和挑战。',
			},
			{
				imgUrl: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679045159_thumb.jpg',
				title: '超越火星：人类太空探索和星际旅行的未来',
				desc: '展望人类在太空探索领域的未来，探讨星际旅行的潜力和挑战。',
			},
			{
				imgUrl: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679045159_thumb.jpg',
				title: '超越火星：人类太空探索和星际旅行的未来',
				desc: '展望人类在太空探索领域的未来，探讨星际旅行的潜力和挑战。',
			},
			{
				imgUrl: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679045159_thumb.jpg',
				title: '超越火星：人类太空探索和星际旅行的未来',
				desc: '展望人类在太空探索领域的未来，探讨星际旅行的潜力和挑战。',
			},
			{
				imgUrl: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679045159_thumb.jpg',
				title: '超越火星：人类太空探索和星际旅行的未来',
				desc: '展望人类在太空探索领域的未来，探讨星际旅行的潜力和挑战。',
			},
		]
		nextTick(() => {
			initData()
			// 数据初始化
		})
	})
	/* 数据初始化 */
	const initData = () => {
		const groupList = <[any]>dynamicGrouping(flowData.list, flowData.column)
		// 数据动态分组

		groupList.forEach((item, i) => (flowData[`column_${i + 1}`] = item))
	}
	/** 数据动态分组 
	* @param {Object} data 分组的数据列表 
	* @param {Object} i 需要分几组 
	* @returns {Array} groups 已分组的数据 
	*/
	const dynamicGrouping = (data, i) => {
		if (i <= 0) return '分组数必须大于0'
		const groups = []
		for (let j = 0; j < i; j++) {
			groups.push([])
		}
		for (let k = 0; k < data.length; k++) {
			const groupIndex = k % i
			groups[groupIndex].push(data[k])
		}
		return groups
	}
</script>

<style lang="scss" scoped>
	::-webkit-scrollbar {
		display: none;
	}

	.tapbar {
		padding: 0rpx 18rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
		padding-top: 90rpx;
		box-sizing: border-box;
		background-color: #fff;

		.tapbar-left {
			color: #000;
			font-size: 40rpx;
			color: #000;
			font-weight: 600;
			flex: 1;

		}


		.tapbar-center {
			flex: 1;
			font-weight: 600;
			text-align: center;
			font-size: 36rpx;
		}

		.tapbar-right {
			flex: 1;
		}
	}

	.user {
		height: auto;
		background-color: #4d6b7c;

		.user-tou {
			padding-top: 100rpx;
			padding-left: 30rpx;
			display: flex;
			align-items: center;

			image {
				margin-right: 20rpx;
			}

			.user-t1 {
				line-height: 60rpx;

				text {
					color: #fff;
				}

				.text1 {
					text:nth-child(1) {
						font-weight: 600;
						color: #fff;
						font-size: 36rpx;
					}
				}
			}
		}

		.texts {
			margin-top: 30rpx;
			padding-left: 30rpx;
			line-height: 60rpx;
			color: #fff;
			font-weight: 100;
		}

		.san {
			display: flex;

			.san1 {
				margin-left: 0rpx;
				width: 120rpx;
				height: 100rpx;
				text-align: center;
				color: #fff;
			}

			.san2 {
				width: 120rpx;
				height: 100rpx;
				text-align: center;
				color: #fff;
				margin: 0rpx 10rpx;
			}

			.san3 {
				color: #fff;
				width: 160rpx;
				height: 100rpx;
				text-align: center;
				margin: 0rpx 10rpx;
			}

			.san4 {
				width: 100rpx;
				height: 60rpx;
				border-radius: 36rpx;
				text-align: center;
				line-height: 60rpx;
				color: #fff;
				background-color: #7a8fff;
				margin-left: 60rpx;
			}

			.san5 {
				width: 100rpx;
				height: 60rpx;
				border-radius: 36rpx;
				text-align: center;
				line-height: 60rpx;
				color: #fff;
				border: 2rpx solid #fff;
				margin-left: 30rpx;
			}
		}

		.si {
			display: flex;

			.si1,
			.si2,
			.si3,
			.si4,
			.si5 {
				flex: 1;
				height: 220rpx;

				text {
					font-size: 24rpx;
					font-weight: 100;
					margin-top: 20rpx;
					color: #fff;
				}

				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}

		.pubu {
			background-color: #fff;
			border-top-right-radius: 60rpx;
			border-top-left-radius: 60rpx;
			.view-p {
				padding: 0rpx 160rpx;
				display: flex;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #fff;
				border-top-right-radius: 60rpx;
				border-top-left-radius: 60rpx;

				view {
					flex: 1;
					text-align: center;
				}
			}


		}


	}

	.container {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		$borderRadius: 12rpx;
		overflow-y: auto;
		height: 1400rpx;
		background-color: #fff;

		.cont-box {
			width: var(--layout-width);

			.item-box {
				width: 100%;
				padding-bottom: 20rpx;
				margin-bottom: 30rpx;
				border-radius: $borderRadius;
				box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.08);

				.img-tip {
					width: 100%;
					border-radius: $borderRadius $borderRadius 0 0;
				}

				.tit-tip {
					text-align: justify;
					font-size: 30rpx;
					padding: 10rpx 20rpx 0;
					font-weight: 900;
				}

				.desc-tip {
					text-align: justify;
					font-size: 26rpx;
					padding: 5rpx 20rpx 0;
					margin-top: 10rpx;
				}
			}
		}
	}

	/* 多行省略 */
	.multi-line-omit {
		word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
		text-overflow: ellipsis; // 溢出用省略号显示
		overflow: hidden; // 超出的文本隐藏
		display: -webkit-box; // 作为弹性伸缩盒子模型显示
		-webkit-line-clamp: 2; // 显示的行
		-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
	}

	/* 单行省略 */
	.one-line-omit {
		width: 100%; // 宽度100%：1vw等于视口宽度的1%；1vh等于视口高度的1%
		white-space: nowrap; // 溢出不换行
		overflow: hidden; // 超出的文本隐藏
		text-overflow: ellipsis; // 溢出用省略号显示
	}
</style>